<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <link rel="stylesheet" type="text/css" href="css/base.css"/>
    <script type="text/javascript" charset="utf-8">
      	mui.init();
      	mui.get()
    </script>
</head>
<body>
	
<nav class="mui-bar mui-bar-tab">
	    <a id="defaultTab" class="mui-tab-item mui-active" href="item.html">
	        <span class="mui-icon mui-icon-videocam"></span>
	        <span class="mui-tab-label">商品</span>
	    </a>
	    <a class="mui-tab-item" href="shop.html">
	        <span class="mui-icon mui-icon-chatboxes"><span style="" class="mui-badge">1</span></span>
	        <span class="mui-tab-label">店铺</span>
	    </a>
	    <a class="mui-tab-item" href="message.html">
	        <span class="mui-icon mui-icon-chatboxes"></span>
	        <span class="mui-tab-label">消息</span>
	    </a>  
	    <a class="mui-tab-item" href="home.html">
	        <span class="mui-icon mui-icon-home"></span>
	        <span class="mui-tab-label">我的</span>
	    </a>
</nav>
<script type="text/javascript">
	//mui初始化
		mui.init();
		var subpages = ['item.html', 'shop.html', 'message.html', 'home.html'];
		var subpage_style = {
			top:'0px',
			bottom: '51px'
		};
		
		
		var aniShow = {};
		
		 //创建子页面，首个选项卡页面显示，其它均隐藏；
		mui.plusReady(function() {
			var self = plus.webview.currentWebview();
			for (var i = 0; i < subpages.length; i++) {
				var temp = {};
				var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);
				if (i > 0) {
					sub.hide();
				}else{
					temp[subpages[i]] = "true";
					mui.extend(aniShow,temp);
				}
				self.append(sub);
			}
		});
		 //当前激活选项
		var activeTab = subpages[0];
		
		 //选项卡点击事件
		mui('.mui-bar-tab').on('tap', 'a', function(e) {
			var targetTab = this.getAttribute('href');
			if (targetTab == activeTab) {
				return;
			}
			//显示目标选项卡
			//若为iOS平台或非首次显示，则直接显示
			if(mui.os.ios||aniShow[targetTab]){
				plus.webview.show(targetTab);
			}else{
				//否则，使用fade-in动画，且保存变量
				var temp = {};
				temp[targetTab] = "true";
				mui.extend(aniShow,temp);
				plus.webview.show(targetTab,"fade-in",300);
			}
			//隐藏当前;
			plus.webview.hide(activeTab);
			//更改当前活跃的选项卡
			activeTab = targetTab;
		});
		 //自定义事件，模拟点击“首页选项卡”
		document.addEventListener('gohome', function() {
			var defaultTab = document.getElementById("defaultTab");
			//模拟首页点击
			mui.trigger(defaultTab, 'tap');
			//切换选项卡高亮
			var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active");
			if (defaultTab !== current) {
				current.classList.remove('mui-active');
				defaultTab.classList.add('mui-active');
			}
		});
</script>
</body>
</html>